<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情页</title>
    <link rel="stylesheet" href="CSS/blog_detail.css">
    <link rel="stylesheet" href="CSS/common.css">
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="imag/导航栏头像.png">
        <!-- span 标签不独占一行, 是一个小盒子 -->
        <span class="title"> 我的博客系统 </span>
        <div class="spacer"></div>
        <!-- # 在a标签中表示占位符 -->
        <a href="#">主页</a>
        <a href="#">写博客</a>
        <a href="#">注销</a>
    </div>

    <div class="container">

        <!-- 左侧信息, 先表示出左侧大盒子-->
        <div class="container-left">
            <div class="user">
                <img src="Imag/用户名头像.png" alt="这是一个用户名头像">
                <!-- 用户名 -->
                <h3>别时须清欢</h3>
                <a href="https://gitee.com/dashboard">Gitee 地址</a>
                <div class="counter">
                    <!-- <p>文章</p>
                    <p>分类</p> -->
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>?</span>
                    <span>?</span>
                </div>
            </div>
        </div>

        <div class="container-right">

            <!-- 表示一篇博客页面 -->
            <div class="blog">
                <!-- 博客标题 -->
                <div class="title">我的第一篇博客</div>
                <!-- 发布时间 -->
                <div class="date">2023-12.23</div>
                <!-- 博客正文-->
                <div class="article">
                    <p>
                        初学HTML CSS JS心得 Lorem ipsum dolor sit amet consectetur adipisicing elit. Error corrupti vel accusamus tempore, unde, minus molestias animi facilis quasi nesciunt eum molestiae odio itaque placeat exercitationem praesentium cupiditate pariatur ratione?

                    </p>
                    
                    <p>
                        学了一段时间之后.... Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga nostrum tempora dolor iste, quia illo debitis labore exercitationem autem dolores ipsa molestias quod eaque facilis nisi quae quisquam aliquam saepe!

                    </p>

                    <p>
                        现在完全不会了..... Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facere, nesciunt at. Odit repellat placeat eaque ad. Ipsa magni inventore sint voluptates ratione dolorem culpa explicabo! Iure quas consectetur ipsa labore.

                    </p>

                </div>
                
                
            </div>

        </div>


    </div>
</body>
</html>